<template>
	<view>
		<u-navbar title=" " titleStyle="color:#fff;" :placeholder="false" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0,0,0,0)">
			<view class="" slot="left">
				<image class="header_back" src="../static/img/ico_back.png" mode="widthFix"></image>
			</view>
			<view class="hedder_right" slot="right">
				<view class="cover_btn" @click="upCoverPhoto">
					<image class="ico" src="../static/img/ico_16.png" mode="widthFix"></image>
					<view class="text">
						更换封面
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="personal_cover">
			<image class="cover_ph" v-if="userInfo.cover" :src="userInfo.cover" mode="aspectFill"></image>
		</view>
		
		<view class="personal_bg">
			
			<view class="personal_head" @click="clickUpHeadImg">
				<image class="head" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="btn">
					<image class="ico" src="../static/img/ico_17.png" mode="widthFix"></image>
					<view class="text">
						更换头像
					</view>
				</view>
				<!-- <u-upload
					:fileList="fileList6"
					@afterRead="afterRead"
					@delete="deletePic"
					name="6"
					multiple
					:maxCount="1"
					width="160rpx"
					height="160rpx"
				>
					<image class="head" :src="userInfo.avatar" mode="widthFix"></image>
					<view class="btn">
						<image class="ico" src="../static/img/ico_17.png" mode="widthFix"></image>
						<view class="text">
							更换头像
						</view>
					</view>
				</u-upload> -->
			</view>
			
			<view class="personal_info">
				<view class="item">
					<view class="name">
						昵称
					</view>
					<view class="info">
						<input v-model="userInfo.first_name" maxlength="12" class="personal_input" placeholder="请输入昵称" placeholder-style="color:#666" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						个人简介
					</view>
					<view class="info">
						<textarea v-model="userInfo.biography" class="personal_textarea" placeholder-style="color:#666" placeholder="请输入个人简介" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						性别
					</view>
					<view class="info" @click="showGender = true">
						<view class="gender_text">
							<view v-if="userInfo.gender == 1" class="text">
								男
							</view>
							<view v-else-if="userInfo.gender == 2" class="text">
								女
							</view>
							<view v-else class="text placeholder">
								选择性别，表达自我
							</view>
							<u-icon name="arrow-right" color="#858587" size="34rpx" bold></u-icon>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="name">
						推氪号
					</view>
					<view class="info">
						<input v-model="userInfo.t_id" maxlength="10" class="personal_input" placeholder="请输入推氪号" placeholder-style="color:#979797" />
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="footer_none"></view>
		<view class="footer_yellow_btn" @click="clickSave">
			保存资料
		</view>
		
		
		<!-- 操作菜单 -->
		<u-popup :show="showGender" @close="closeGender" @open="openGender" mode="bottom" bgColor="#2C2C2C" round="30rpx">
			<view class="power_sheet">
				<view class="item" v-for="(item,index) in listGender" :key="index" @click="clickSheetGender(item.val)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				genderName:'',
				showGender: false,
				listGender: [
					{
						name: '男',
						val: 1
					},
					{
						name: '女',
						val: 2
					}
				],
				fileList1: [],
				fileList6: [],
				
				userInfo:{},
				userId:'',
				aliyunOssSign: {},
				
				firstName:'',
				cover:''
			}
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.userId = JSON.parse(uni.getStorageSync('userId'));
			this.token = uni.getStorageSync('token')
			console.log('userInfo-------',this.userInfo)
			
			// uni.$u.http.get('/api/aliyun_oss_sign/'+this.userId +'?from=miniprogram').then(res => {
			// 	console.log('阿里云请求参数-----',res.data.data)
			// 	this.aliyunOssSign = res.data.data
			// }).catch(err => {
			// 	console.log(err)
			// })
			this.getAliyunOssSing()
		},
		methods: {
			clickSave(){
				if(!this.userInfo.first_name){
					uni.showToast({
						title: '请输入昵称',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.updateUserdata({
					first_name: this.userInfo.first_name,
					biography: this.userInfo.biography,
					gender: this.userInfo.gender,
					t_id: this.userInfo.t_id
				})
			},
			clickSheetGender(val){
				this.userInfo.gender = val
				this.showGender = false
			},
			// 获取阿里云上传请求参数
			getAliyunOssSing(){
				uni.$u.http.get('/api/aliyun_oss_sign/'+this.userId +'?from=miniprogram').then(res => {
					//console.log('阿里云请求参数-----',res.data.data)
					this.aliyunOssSign = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 更新用户资料
			updateUserdata(data){
				uni.$u.http.post('/api/update_userdata/'+this.userId+'?from=miniprogram', data ).then(res => {
					console.log('更新用户资料--',res.data)
					if(res.data.status == 1){
						this.userInfo = res.data.data
						uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
						uni.hideLoading();
						uni.showToast({
							title: '更新成功',
							duration: 2000,
							icon: 'none'
						});
					}
					else{
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: '更新失败!',
						duration: 2000,
						icon: 'none'
					});
				})
			},
			
			// 上传头像图片
			clickUpHeadImg(){
				const that = this
				uni.chooseImage({
					count: 1,
					success: function (res) {
						const tempFilePath = res.tempFilePaths[0];
						//console.log(res.tempFiles[0].size)
						if(res.tempFiles[0].size > (5*1024*1024)){
							that.$refs.uToast.show({
								message: "头像大小不能大于5MB"
							})
							return
						}
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						console.log(tempFilePath)
						uni.uploadFile({
							url: 'https://www.shenmaio.com/api/upload_user_image/'+that.userId +'?from=miniprogram',
							filePath: tempFilePath,
							name: 'file',
							header:{
								'auth-token': uni.getStorageSync('token'),
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: (resa) => {
								//console.log('上传------',JSON.parse(resa.data).message)
								//console.log('上传-----1-',that.userInfo)
								that.userInfo.avatar = JSON.parse(resa.data).message
								//console.log('上传-----2-',that.userInfo)
								uni.hideLoading();
							}
						});
					}
				});
			},
			// 上传背景图片
			upCoverPhoto(){
				const that = this
				uni.chooseImage({
					count: 1,
					success: function (res) {
						const tempFilePath = res.tempFilePaths[0];
						const timestamp = new Date().getTime();
						const randomNum = Math.floor(Math.random() * 10000);
						const fileName = timestamp + "_" + randomNum + tempFilePath.substring(tempFilePath.lastIndexOf('.'));
						console.log('视频名称---',fileName)
						
						if(res.tempFiles[0].size > (5*1024*1024)){
							that.$refs.uToast.show({
								message: "图片大小不能大于5MB"
							})
							return
						}
						uni.showLoading({
							title: '更新中',
							mask: true
						});
						uni.uploadFile({
							url: that.aliyunOssSign.host,
							filePath: tempFilePath,
							name: 'file',
							formData: {
								key: that.aliyunOssSign.dir+fileName,
								policy: that.aliyunOssSign.policy,
								OSSAccessKeyId: that.aliyunOssSign.accessid,
								signature: that.aliyunOssSign.signature
							},
							success: (resa) => {
								console.log('上传------',resa)
								if(resa.statusCode == 204)
								{
									that.userInfo.cover = that.aliyunOssSign.host +'/'+ that.aliyunOssSign.dir + fileName
									that.updateUserdata({first_name: that.userInfo.first_name, cover: that.userInfo.cover})
								}
								else{
									uni.hideLoading();
									uni.showToast({
										title: '上传失败,请重新上传',
										duration: 2000,
										icon: 'none'
									});
								}
							}
						});
					}
				});
			},
			confirmGender(e){
				console.log(e.value[0])
				this.genderName = e.value[0]
				this.showGender = false
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				const that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.aliyunOssSign.host,
						filePath: url,
						name: 'file',
						formData: {
							key: that.aliyunOssSign.dir,
							policy: that.aliyunOssSign.policy,
							OSSAccessKeyId: that.aliyunOssSign.accessid,
							signature: that.aliyunOssSign.signature
						},
						success: (res) => {
							console.log('上传组件',res)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			openGender() {
				// console.log('open');
			},
			closeGender() {
				this.showGender = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #1F1F1F;
}
.power_sheet{
	padding:20rpx;
	width: 100%;
	box-sizing: border-box;
	.item{
		color:#fff;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		text-align: center;
		padding:30rpx;
		border-top:1rpx solid #666;
		&:first-child{
			border:none;
		}
	}
}
.personal_input{
	display: block;
	width: 100%;
	font-size: 26rpx;
	background:#2C2C2C;
	padding:0 20rpx;
	box-sizing: border-box;
	border: none;
	border-radius: 10rpx;
	color:#fff;
	height: 70rpx;
	line-height: 70rpx;
}
.personal_textarea{
	display: block;
	width: 100%;
	font-size: 26rpx;
	background:#2C2C2C;
	padding:20rpx 20rpx;
	box-sizing: border-box;
	border: none;
	border-radius: 10rpx;
	color:#fff;
	height: 200rpx;
	line-height: 40rpx;
}
.gender_text{
	width: 100%;
	font-size: 26rpx;
	background:#2C2C2C;
	padding:0 15rpx 0 20rpx;
	box-sizing: border-box;
	border: none;
	border-radius: 10rpx;
	color:#fff;
	height: 70rpx;
	line-height: 70rpx;
}
.hedder_right{
	margin-right: 20rpx;
}
.header_back{
	width: 70rpx;
	height: 70rpx;
}
.cover_btn{
	height: 70rpx;
	border-radius: 35rpx;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding:0 17rpx;
	.text{
		font-size: 26rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: justify;
		color: #FFFFFF;
	}
	.ico{
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}
}
.personal_cover{
	width: 100%;
	height: 400rpx;
	.cover_ph{
		width: 100%;
		height: 400rpx;
	}
	
}
.personal_bg{
	border-radius: 30rpx 30rpx 0px 0px;
	background: #1F1F1F;
	position: relative;
	z-index: 9;
	margin-top: -40rpx;
	padding-top: 120rpx;
	.personal_info{
		.item{
			padding:25rpx 30rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.name{
				flex-shrink: 0;
				font-size: 30rpx;
				font-weight: normal;
				line-height: 70rpx;
				text-align: justify;
				color: #979797;
				width: 160rpx;
			}
			.gender_text{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.info{
				width: 100%;
			}
			.text{
				font-size: 26rpx;
				font-weight: normal;
				line-height: 44rpx;
				&.placeholder{
					color: #666;
				}
			}
		}
	}
	.personal_head{
		position: absolute;
		left:50%;
		top: -80rpx;
		width: 160rpx;
		height: 160rpx;
		margin-left: -80rpx;
		border-radius: 50%;
		border:2rpx solid #fff;
		box-sizing: border-box;
		overflow: hidden;
		.btn{
			position: absolute;
			left: 0;
			top: 0;
			right:0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.ico{
				width: 40rpx;
				height: 40rpx;
			}
			.text{
				font-size: 20rpx;
				font-weight: normal;
				line-height: 30rpx;
				text-align: center;
				color: #FFFFFF;
				padding-top: 10rpx;
			}
		}
		.head{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}
}
.footer_none{
	width: 100%;
	height: 160rpx;
}
.footer_yellow_btn{
	position: fixed;
	left:40rpx;
	right: 0;
	bottom: 60rpx;
	width: 670rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: #F9BE01;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	color: #292D32;
	font-weight: 600;
}
</style>
